<template>
<div class="table scrollbar" ref="table">
    <slot :height="height"></slot>
</div>
</template>

<script lang='ts' setup>
import {  onMounted, onUnmounted, ref } from 'vue';
let table = ref()

let height =ref<number>()
let timer:number | undefined

const handleResize = () => {
    clearTimeout(timer)
    setTimeout(() => {
        const collection =  table.value.getBoundingClientRect()
        height.value = collection.height
    }, 500);
}

onMounted(() =>{
    window.addEventListener("resize",handleResize)
})

onUnmounted(() =>{
    window.removeEventListener("resize",handleResize)
})
</script>

<style>
.table {
    flex: 1;
    width: 100%;
    overflow: visible;
}
</style>